﻿<!DOCTYPE html>
<html>
<head>
    <title>QuickEdit Helper for WebMatrix - Start Here</title>
    <link href="content/Site.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
</head>
<body>
    <div class="container">
        <div class="header">
            <img src="content/images/webx-icon.png" alt="WebMatrix" />
            <h1>
                WebMatrix Helpers</h1>
            <h2>
                QuickEdit Helper - Start Here</h2>
        </div>
        <div class="content">
            <div class="navLinks">
                <a href="reference.htm">Helper Reference</a></div>
            <h3>
                Introduction</h3>
            <p>
                Microsoft WebMatrix provides an easy way to get started with Web development, and
                together with new Razor syntax for ASP.NET Web Pages it includes everything you
                need to get your Web site up, running and integrated with many different sites and
                networks. The WebMatrix helpers are designed to make your life easier when creating
                Web sites. They provide you a simple and consistent way of performing common Web
                development tasks that otherwise would require a great deal of custom coding. With
                one single line of code you should be able to consume an OData feed, store information
                in Windows Azure Storage, among other things.
            </p>
            <p>
                The <strong>QuickEdit</strong> helper is designed to make your WebMatrix sites editable.
                When the helper is in place, the users from your site that belong to a group (or
                role) that you define, will see an <strong>Edit</strong> button that launches an
                editor to update the content displayed there. On the other side, unregistered users
                (or anonymous) will just see the edited content, not the button. You don&#39;t have
                to worry about where to store the edited content, you just need to provide your
                database name and QuickEdit helper will take care of storing the content there.</p>
            <p>
                The helper includes the following files:</p>
            <ul>
                <li>The <strong>QuickEdit.cshtml</strong> file located into the <strong>App_Code</strong>
                    folder inside you WebMatrix site</li>
                <li>A <strong>SaveContent.cshtml</strong> file under the <strong>QuickEdit</strong>
                    folder that will handle the content data updates against the content database</li>
                <li>A folder located in <strong>QuickEdit/jHtmlAreaFiles, </strong>with the jHtmlArea
                    files (<a href="http://jhtmlarea.codeplex.com/">http://jhtmlarea.codeplex.com/</a>)
                    needed to render the HTML content editor</li>
            </ul>
            <h3>
                Getting Started in 60 Seconds</h3>
            <p>
                The easiest way to get started with the QuickEdit helper is to use the <strong>Starter
                    Site</strong> WebMatrix template (Quick Start page | Site From Template | Starter
                Site template), which includes Web site membership configured with the <strong>WebSecurity</strong> helper.            
                Now, to start using the QuickEdit helper follow these steps:</p>
            <ol>
                <li>Open the Files workspace and add the following highlighted line to the <strong>_AppStart.cshtml</strong>
                    page of your WebMatrix site (create this page if it doesn't exists).
                    <div class="code">
                        @{<br />
                        <span class="codeIndent1">WebSecurity.InitializeDatabaseConnection(&quot;StarterSite&quot;,
                            &quot;UserProfile&quot;, &quot;UserId&quot;, &quot;Email&quot;, true);</span><br />
                        <span class="codeIndent1">...</span><br />
                        <span class="codeIndent1 highlight">QuickEdit.Initialize(&quot;StarterSite&quot;);</span><br />
                        }
                    </div>
                    Where &quot;StarterSite&quot; is the name of your database. The QuickEdit helper
                    will store the edited content there. Here you can also define which group of users
                    (or roles) can edit the content (for example, @QuickEdit.Initialize(&quot;StarterSite&quot;,
                    "myAdminGroup") ). The group (or role) used by default will be &quot;admin&quot;.</li>
                    <li>Run the web site and create a new user, by using the <strong>Register</strong> link
                        on the top right corner of the page. </li>
                    <li>Following the steps in the section &quot;Creating Security for Groups of Users (Roles)&quot;
                        from <a href="http://www.asp.net/webmatrix/tutorials/16-adding-security-and-membership">
                            this WebMatrix tutorial</a>, create a new &quot;<strong>admin</strong>&quot;
                        user group (or role) and assign it to the recently created user.</li>
                        <img src="content/images/quickedit-roles.png"/>
                    <li>Add the highlighted lines from below in the page where you want to show editable
                        content. The &quot;homepage&quot; value should be changed if necessary, by a unique
                        name for each editable section. If you're using the Starter Site template, the GetHeaderHtml
                        can be placed in <em>_SiteLayout.cshtml</em> and the GetContentHtml in <em>Default.cshtml</em>.
                        <div class="code">
                            &lt;!DOCTYPE html&gt;<br />
                            &lt;html&gt;<br />
                            <span class="codeIndent1">&lt;head&gt;</span><br />
                            <span class="codeIndent2">...</span><br />
                            <span class="codeIndent2 highlight">@QuickEdit.GetHeaderHtml()</span><br />
                            <span class="codeIndent1">&lt;/head&gt;</span><br />
                            <span class="codeIndent1">&lt;body&gt;</span><br />
                            <span class="codeIndent2">...</span><br />
                            <span class="codeIndent2 highlight">@QuickEdit.GetContentHtml("homepage")</span><br />
                            <span class="codeIndent2">...</span><br />
                            <span class="codeIndent1">&lt;/body&gt;</span><br />
                            &lt;/html&gt;<br />
                        </div>
                    </li>
                    <li>That&#39;s it! The QuickEdit helper will start managing the editable content of
                        your web site automatically. Try logging in as the user you've created and see how
                        the <strong>Edit</strong> button is displayed, as this user belongs to the &quot;admin&quot; group (or role).</li>
            </ol>
            <h3>
                Running the Bakery Sample Web site</h3>
            <p>
                Optionally, you can download a sample WebMatrix web site where you can see the helper
                in action. To download and run the sample, follow these steps.</p>
            <ol>
                <li>Browse to the <a href="http://quickedithelper.codeplex.com">QuickEdit Helper CodePlex
                    site</a> and download the <strong>QuickEdit Helper Sample</strong>.</li>
                <li>Extract the content of the package, right-click the <strong>QuickEdit.Bakery</strong>
                    folder and select '<strong>Open as a Web Site with Microsoft WebMatrix</strong>'.
                    This will open the Bakery sample web site with WebMatrix.</li>
                <li>Click the <strong>Run</strong> button and play with the sample!</li>
            </ol>
            <h3>
                More Info</h3>
            <p>
                You can get more information on the helper on the <a href="http://quickedithelper.codeplex.com/">
                    QuickEdit Helper CodePlex site</a>.
                <p>
                    Learn more on WebMatrix, ASP.NET Web Pages and the Razor Syntax with <a href="http://www.microsoft.com/web/webmatrix/learn/">
                        the WebMatrix tutorials.</a></p>
        </div>
        <ul class="footer">
            <li>We're always looking for <a href="mailto:webapp@microsoft.com">bugs, feedback and
                suggestions!</a></li>
            <li>&copy; 2010-2011 Microsoft Corporation. Powered by IIS Express.</li>
        </ul>
    </div>
</body>
</html>
